$myFont:Helvetica,sans-serif;
$myColor: red;
$myFontSize:18px;
$myWidth:680px;

 .Triangle{
   font-family: $myFont;
   font-size: $myFontSize;
   color:$myColor;
   width:$myWidth;
 }


//sass 作用域
h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}


//转成css

// h1 {
//   color: green;
// }

// p {
//   color: red;
// }




!global   全局作用域

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

//转成css

// h1 {
//   color: green;
// }

// p {
//   color: green;
// }


//Sass 嵌套属性

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

//转成css

// font-family: Helvetica, sans-serif;
// font-size: 18px;
// font-weight: bold;

// text-align: center;
// text-transform: lowercase;
// text-overflow: hidden;


Sass 导入文件
/*@import filename;*/

Sass Partials
如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。

但是，在导入语句中我们不需要添加下划线。
例:_filename;


//Sass @mixin 与 @include

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

selector {
  @include mixin-name;
}

.danger {
  @include important-text;
  background-color: green;
}

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

@mixin bordered( $color,$width){
	border:$width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

//css转换
// .myArticle {
//   border: 1px solid blue;
// }

// .myNotes {
//   border: 2px solid red;
// }

@mixin bordered($color: blue, $width: 1px) {   //混入的参数也可以定义默认值，语法格式如下：
  border: $width solid $color;
}

@mixin sexy-border($color,$width:1in) {
	border: {
		color:$color;
		width:$width;
		style:dashed;
	}
}

p{@include sexy-border(blue) ; }
h1{ @include sexy-border{blue , 2in); }

//转css
// p {
//   border-color: blue;
//   border-width: 1in;
//   border-style: dashed; }

// h1 {
//   border-color: blue;
//   border-width: 2in;
//   border-style: dashed; 
// }



//可变参数
@mixin box-shadow($shadows...){
	-moz-box-shadow:$shadows;
	-webkit-box-shadow:$shadows;
	box-shadow:$shadows;
}

.shadows {
	@include box-shadow(0px 4px 5px #666 , 2px 6px 10px #999);
}

//浏览器前缀使用混入
@mixin transform($property) {
	-webkit-transform:$property;
	-ms-transform: $property;
	transform: $property;
}

.myBox {
	@include  transform(rotate(20deg))
}

//转csss
// .myBox {
//   -webkit-transform: rotate(20deg);
//   -ms-transform: rotate(20deg);
//   transform: rotate(20deg);
// }

//@extend 与 继承

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report {
	@extend .button-basic;
	background-color:red ;
}